<template>
  <div class="kunkun">
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="productImage" label="商品图片" width="280">
        <template #default="scoped">
          <img class="img" alt="" :src="scoped.row.productImage">
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="商品标题" width="280" />
      <el-table-column prop="address" label="状态">
        <template #default="kun">
          <span v-if="kun.row.productStatus === 0">未处理</span>
          <span v-if="kun.row.productStatus === 1">处理中</span>
          <span v-if="kun.row.productStatus === 2">以生产</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="anniu">
          <el-button v-if="anniu.row.productStatus === 0" type="primary" @click="shengc(anniu.row)">一键生成</el-button>
          <el-button v-if="anniu.row.productStatus === 2" type="danger" @click="del(anniu.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
/// 运行 json-server --watch db.json

import request from "./api/index.js";
export default {
  data() {
    return {
      //数据

      tableData: [
      ]
    }
  },
  created() {
    //get请求
    request({
      url: 'http://localhost:3000/products',
    }).then((res) => {
      console.log(res.data);
      this.tableData = res.data
    })
  },
  methods: {
    //修改
    shengc(row) {
      console.log(row);
      row.productStatus = 1
      request({
        method: "put",
        url: `http://localhost:3000/products/${row.id}`,
        data: row
      })
    },
    //删除
    del(id) {
      console.log(id);
      request({
        method: 'delete',
        url: `http://localhost:3000/products/${id}`,
      }).then((res) => {
        location.reload()
      })
    }
  }
}
</script>

<style>
.kunkun {
  margin-top: 50px;
}

.img {
  width: 100%;
}
</style>
